<template>
  <div style="height: 100%;">

    <el-container>
      <el-header>
        <div>
          <h2>balabala</h2>
        </div>
        <div>
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" style="width: 300px;">
          </el-input>
          <el-button type="info" plain>搜索</el-button>
        </div>

        <div class="header-right">
          <el-button type="warning" plain icon="el-icon-chat-round">消息</el-button>

          <el-button type="success" plain icon="el-icon-user" v-if="userInfo.uid === -1">登录</el-button>

        </div>

      </el-header>

      <el-container>
        <el-aside width="300px">
          <h3>推荐视频</h3>
          <div class="aside-h">
            <img src="../assets/picture.jpg" class="main-img">
            <el-link type="primary">第一个推荐</el-link>
            <img src="../assets/picture.jpg" class="main-img">
            <el-link type="primary">第二个推荐</el-link>
            <img src="../assets/picture.jpg" class="main-img">
            <el-link type="primary">第三个推荐</el-link>
            <img src="../assets/picture.jpg" class="main-img">
            <el-link type="primary">第四个推荐</el-link>
            <img src="../assets/picture.jpg" class="main-img">
            <el-link type="primary">第五个推荐</el-link>

          </div>
        </el-aside>

        <el-container>

          <el-main>
            <el-page-header @back="goBack" :content="videoInfo.title">
            </el-page-header>
            <div class="main-h">

              <video controls height="600px">
                <source :src="videoInfo.videoUrl" type="video/mp4">
                对不起，你的浏览器不支持当前格式视频。
              </video>

            </div>

            <div class="main-l">
              <p>{{videoInfo.description}}</p><br>
              <el-row>
                <el-button id="sub" type="danger" icon=" el-icon-thumb" size="small" round v-on:click="subscribe">{{subscribeMess}}</el-button>
                <el-button type="warning" icon="el-icon-star-off" size="small" round>收藏</el-button>
                <el-button type="info" icon="el-icon-s-comment" size="small" round>评论</el-button>
              </el-row>
            </div>


            <div>
              <span>共有1000条评论来袭！</span>
              <!--评论区-->
              <el-table :data="tableData" height="300px" style="width: 100%" :show-header="false">
                <el-table-column prop="name" label="昵称" width="150">
                </el-table-column>
                <el-table-column prop="comment" label="评论内容">
                </el-table-column>
              </el-table>
            </div>

          </el-main>

        </el-container>

      </el-container>

      <el-footer>
        <div>
          <h4>©西北农林科技大学巴拉巴拉开发小组版权所有</h4>
        </div>
      </el-footer>
    </el-container>

  </div>



</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {
        //要播放的视频参数
        videoInfo: {},
        //用户信息
        userInfo: {},
        //上传
        tableData: [],
        subscribeMess: "点赞",
      }
    },
    methods: {
      //初始化参数，页面渲染前调用
      initParams: function (){
        this.videoInfo = this.$route.params.videoInfo
        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
      },
      //回退主页
      goBack: function (){
        this.$router.push("/main")
      },
      //点赞
      subscribe: function (){
        try {
          let postData = new FormData()
          postData.append("uid", this.userInfo.uid)
          postData.append("videoId", this.videoInfo.videoId)
          axios.post("user/add_favorite", postData).then(res=>{
            if (res.data.code === 0) {
              this.subscribeMess="已点赞"
            } else alert(res.data.errorMessage)
          })
        } catch (e) {
          alert("服务出错")
        }
      },
      addPlayNum: function () {
        try {
          axios.get("video/add_playnum", {
            params:{"videoId": this.videoInfo.videoId}
          }).then(res=>{
            if (res.data.code !== 0) {
              alert(res.data.errorMessage)
            }
          })
        } catch (e) {
          alert("服务出错")
        }
      },
    },
    //上传---结束
    created() {
      this.initParams()
      if (this.videoInfo === undefined) this.$router.push("/main")
    },
    mounted() {//生命周期函数挂载完成后的方法，vue自带的生命周期函数
      window.vue = this
      this.addPlayNum()
    }
  }
</script>

<style>
  .el-container {
    height: 100%;
  }

  .el-header {
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    justify-content: space-between;
    background-color: #FFC0CB;
  }

  .el-main {}

  .el-aside {
    background-color: aliceblue;
  }

  .el-row {
    float: right;
  }

  .el-footer {
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    background-color: #FFC0CB;
  }

  .as-div {
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    width: 200px;
    height: 100px;
    font-size: 20px;
  }

  .as-a {
    text-decoration: none;
  }

  .aside-h {
    float: left;
    width: 70%;
    height: 70%;
  }

  .header-right {
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
  }

  .main-h {
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
  }

  .main-l {
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
  }

  .main-img {
    max-height: 80%;
    max-width: 80%;
  }
</style>
